/* eslint no-unused-expressions: 0 */
import React, { Component } from 'react';
import { Dialog, Input, Select, Grid } from '@alifd/next';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
import DialogDecorator from './DialogDecorator';

const { Col, Row } = Grid;

class GroupControlFormDialog extends Component {
  constructor(props) {
    super(props);

    this.state = {
      visible: props.visible,
      value: props.value,
    };
  }

  onFormChange = (value) => {
    this.setState({
      value,
    });
  };

  onOkHandler = () => {
    this.refs.form.validateAll((errors, values) => {
      if (errors) {
        console.log('errors', errors);
        return;
      }
      this.props.onOk && this.props.onOk(this.state.value);
    });
  };

  render() {
    return (
      <Dialog
        title="编辑数据"
        onClose={this.props.onClose}
        onCancel={this.props.onCancel}
        afterClose={this.props.afterClose}
        onOk={this.onOkHandler}
        visible={this.state.visible}
        style={{ width: 400 }}
      >
        <IceFormBinderWrapper
          value={this.state.value}
          onChange={this.onFormChange}
          ref="form"
        >
          <div>
            <Row>
              <Col span={5}>
                <span style={styles.label}>部门名称</span>
              </Col>
              <Col span={18}>
                <IceFormBinder
                  required
                  name="groupname"
                  message="当前标题必填"
                >
                  <Input
                    placeholder='部门名称'
                    style={styles.formField}
                    trim={true}
                  />
                </IceFormBinder>
                <IceFormError name="groupname" />
              </Col>
            </Row>
            <Row style={styles.row}>
              <Col span={5}>
                <span style={styles.label}>部门描述</span>
              </Col>
              <Col span={18}>
                <IceFormBinder
                  required
                  name="description"
                  message="部门描述必填"
                >
                  <Input
                    placeholder='部门描述'
                    style={styles.formField}
                  />
                </IceFormBinder>
                <IceFormError name="description" />
              </Col>
            </Row>
          </div>
        </IceFormBinderWrapper>
      </Dialog>
    );
  }
}

const styles = {
  row: {
    marginTop: '10px',
  },
  label: {
    lineHeight: '30px',
  },
  formField: {
    width: '100%',
  },
};

export default DialogDecorator(GroupControlFormDialog);
